<template>
  <div>
    <my-breadcrumb :items="['系统设置', '发货地址']"/>
    <div>
      <Button type="primary" @click="addShow" style="margin-bottom: 10px;">添加发货地址</Button>
      <Alert v-for="(addR, index) in addressList" :key="index">
        <div class="top">
          <span class="name">{{addR.name}}</span><span class="phone">{{addR.phone}}</span>
        </div>
        <div class="btn">
          <Button type="primary" @click="updateShow(index)">修改</Button>
          <Button type="error" @click="deleteAddress(index)">删除</Button>
        </div>
        <template slot="desc">
          <span v-if="index === 0 && addR.isDefaultAddress === 1" class="default">默认</span>
          <Button v-else size="small" type="primary" @click="setDefault(addR.id)">设置为默认地址</Button>
          <span>{{addR.province}}</span>
          <span>{{addR.city}}</span>
          <span>{{addR.county}}</span>
          <span>{{addR.address}}</span>
        </template>
      </Alert>
    </div>
    <Modal v-model="showModal" @on-ok="subForm" :loading="true">
      <Form :model="formData" :label-width="70" ref="form">
        <FormItem label="选择地区">
          <Cascader
            :data="options"
            v-model="selectedOptions"
            @on-change="handleChange">
          </Cascader>
        </FormItem>
        <FormItem label="详细地址" prop="address">
          <Input v-model="formData.address"/>
        </FormItem>
        <FormItem label="发货人" prop="name">
          <Input v-model="formData.name"/>
        </FormItem>
        <FormItem label="电话号码" prop="phone">
          <Input v-model="formData.phone"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'shipping-address',
  data () {
    return {
      url: {
        list: '/shipping/address/list',
        add: '/shipping/address/add',
        update: '/shipping/address/update',
        del: '/shipping/address/delete',
        deChange: '/shipping/default/address/change',
        deInfo: '/shipping/default/address/info'
      },
      addressList: [],
      showModal: false,
      options: [],
      selectedOptions: [],
      formData: {
        name: '',
        phone: '',
        address: ''
      },
      isAdd: false,
      isUpdate: false,
      nowList: {},
      localData: {},
      localChange: false,
      CodeToText: []
    }
  },
  methods: {
    getList () {
      this.$ajax.post(this.url.list).then(res => {
        if (res.data.success) {
          this.addressList = res.data.data
          let first = null
          this.addressList.forEach(item => {
            if (item.isDefaultAddress === 1) {
              first = item
            }
          })
          if (first !== null) {
            this.addressList.splice(this.addressList.indexOf(first), 1)
            this.addressList.unshift(first)
          }
        }
      })
    },
    setDefault (id) {
      this.$ajax.post(this.url.deChange, id).then(res => {
        if (res.data.success) {
          this.getList()
          this.$Message.success('修改成功')
        }
      })
    },
    handleChange (value) {
      let params = {}
      params.provinceCode = value[0]
      params.cityCode = value[1]
      params.countyCode = value[2]
      params.province = this.CodeToText[value[0]]
      params.city = this.CodeToText[value[1]]
      params.county = this.CodeToText[value[2]]
      this.localData = params
      this.localChange = true
    },
    importData () {
      if (!this.CodeToText[0]) {
        this.CodeToText = require('element-china-area-data').CodeToText
        this.options = require('element-china-area-data').regionData
      }
    },
    addShow () {
      this.importData()
      this.showModal = true
      this.isAdd = true
      this.isUpdate = false
      this.$refs.form.resetFields()
      this.selectedOptions = []
    },
    updateShow (index) {
      this.importData()
      this.localChange = false
      this.isUpdate = true
      this.isAdd = false
      this.showModal = true
      this.nowList = this.addressList[index]
      this.selectedOptions = [this.nowList.provinceCode + '', this.nowList.cityCode + '', this.nowList.countyCode + '']
      for (let i in this.formData) {
        this.formData[i] = this.nowList[i]
      }
    },
    deleteAddress (index) {
      this.$ajax.post(this.url.del, this.addressList[index].id).then(res => {
        if (res.data.success) {
          this.$Message.success('删除成功')
          this.getList()
        }
      })
    },
    subForm () {
      if (this.isAdd) {
        // 添加操作
        if (!this.localData.city) {
          return
        }
        let params = {...this.formData, ...this.localData, type: 2}
        this.$ajax.post(this.url.add, params).then(res => {
          if (res.data.success) {
            this.$Message.success('添加成功')
            this.showModal = false
            this.getList()
          }
        })
      } else if (this.isUpdate) {
        // 更新操作
        let temp = {
          name: this.nowList.name,
          phone: this.nowList.phone,
          address: this.nowList.address
        }
        let isChange = JSON.stringify(this.formData) !== JSON.stringify(temp)
        if (this.localChange || isChange) {
          let params = {...this.formData, ...this.localData, id: this.nowList.id, type: 2}
          this.$ajax.post(this.url.update, params).then(res => {
            if (res.data.success) {
              this.$Message.success('更新成功')
              this.showModal = false
              this.getList()
            }
          })
        }
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped>
  .top{
    margin-bottom: 10px;
  }
  .name{
    font-size: 16px;
  }
  .phone{
    font-size: 12px;
    margin-left: 12px;
  }
  .default{
    font-size: 12px;
    border: 1px solid #f60;
    padding: 4px;
    color: #f60;
    border-radius: 3px;
  }
  .btn{
    height: 100%;
    position: absolute;
    right: 24px;
    top: 0;
    line-height: 90px;
    display: none;
  }
  .ivu-alert:hover .btn{
    display: block;
  }
</style>
